<template>
  <div class="member-list">
    <!--    系统设置-充值管理-->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Button :type="'primary'" @click="handleAdd">新增</Button>
      </template>
      <template #status="{ text }">
        <Tag :color="targetStatus(text)['color']">{{ targetStatus(text)['label'] }}</Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              color: record['status'] === OFF_SHELVES ? '' : 'error',
              label: record['status'] === OFF_SHELVES ? '上架' : '下架',
              onClick: handleStatus.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>

    <SpuModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script setup lang="ts">
  import SpuModal from './modal.vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import { computed, onActivated } from 'vue';
  import { Tag, Button } from 'ant-design-vue';
  import { useModal } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import { tableColumns, tableFormSchema } from './data';
  import { SpuStatusEnum, spuStatusList } from '@/enums/spuEnum';
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  const { SpuModule } = mcApi;
  const { SpuApi } = SpuModule;
  const { OFF_SHELVES } = SpuStatusEnum;

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    immediate: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    api: SpuApi.getSpuRechargePage,
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    actionColumn: {
      width: 200,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });
  onActivated(() => reload());

  const targetStatus = computed(() => {
    return (text: number) => {
      return spuStatusList.find((find: any) => find.value === text) || {};
    };
  });

  const [registerModal, { openModal, closeModal }] = useModal();
  const { createMessage, createConfirm } = useMessage();

  function handleStatus(record: any) {
    const { id, status } = record || {};
    const ifOff = status === OFF_SHELVES;
    const text = ifOff ? '上架' : '下架';
    createConfirm({
      title: '提示',
      iconType: 'warning',
      content: `是否确认${text}`,
      onOk: async () => {
        const fun = ifOff ? SpuApi.putOnShelvesSpu : SpuApi.putOffShelvesSpu;
        await fun(id);
        createMessage.success(`${text}成功！`);
        await reload();
      },
    });
  }
  function handleEdit(record: any) {
    openModal(true, {
      record,
      ifUpdate: true,
    });
  }
  function handleAdd() {
    openModal(true, {
      ifUpdate: false,
    });
  }
  function handleSuccess() {
    closeModal();
    reload();
  }
</script>
<script lang="ts">
  export default {
    name: 'Recharge',
  };
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
